<!--
 * @Author: 李金深 2896583081@qq.com
 * @Date: 2023-05-24 10:29:47
 * @LastEditors: 李金深 2896583081@qq.com
 * @LastEditTime: 2023-07-26 14:38:55
 * @FilePath: /com.huizhouyiren.web.d0101/src/views/main/components/profile.vue
 * @Description: 登录用户首页左侧信息栏
-->
<script setup>
import { useRouter } from "vue-router"
import { useUser } from "@/stores/user";
import { useEmail } from '@/stores/email';
import { useChat } from "@/stores/chat"

defineProps({
    type: {
        type: String,
        default: "main",// main 主页面显示    email 邮箱页显示
    }
})
const router = useRouter()
const userStore = useUser()
const emailStore = useEmail()
const chatStore = useChat()
/**
 * @description: 页面跳转
 * @param {*} url 路径
 * @return {*}
 */
const goUrl = function (url) {
    router.push(url)
}
</script>
<template>
    <div class="w-full py-2 bg-white rounded-md border_box">
        <div class="flex items-center px-2 mb-2" style="height: 5rem; ">
            <div class="h-full mr-2 overflow-hidden rounded " style="width: 45%;">
                <img :src="userStore.userInfo.avatar" alt="" class="object-cover w-full h-full">
            </div>
            <div class="flex flex-col justify-between flex-1 h-full text-sm">
                <div>
                    <div>{{ userStore.userInfo.nickname }}</div>
                    <div class="mt-1 text-xs text-gray-400">ID:{{ userStore.userInfo.uid }}</div>
                </div>
                <div class="flex items-center text-xs cursor-pointer text-primary" @click="goUrl('/main/profile')">
                    <img src="../../assets/image/home/edit.png" alt="" style="height: .875rem;width: auto;" class="mr-1">
                    {{ $t('home.editFile') }}
                </div>
            </div>
        </div>
        <div v-if="type == 'main'" class="flex items-center justify-around pt-1 border-t border-solid border-borderColor">
            <div style="user-select: none;" class="cursor-pointer">
                <div class="text-xl font-bold text-center text-primary" @click="goUrl('/chat')">{{
                    chatStore.unread > 99 ? '99+' : chatStore.unread }}</div>
                <div class="text-xs text-center text-gray-500">{{ $t('chat.message') }}</div>
            </div>
            <div style="height: 1.25rem;width: .0625rem;" class="bg-borderColor"></div>
            <div style="user-select: none;" class="cursor-pointer" @click="goUrl('/email')">
                <div class="text-xl font-bold text-center text-primary">{{ emailStore.unread > 99 ? "99+" : emailStore.unread
                }}</div>
                <div class="text-xs text-center text-gray-500">{{ $t('mine.email') }}</div>
            </div>
            <div style="height: 1.25rem;width: .0625rem;" class="bg-borderColor"></div>
            <div style="user-select: none;" class="cursor-pointer" @click="goUrl('/main/recharge')">
                <div class="text-xl font-bold text-center">{{ userStore.userInfo.credit.split(".")[0] }}</div>
                <div class="text-xs text-center text-gray-500">{{ $t('mine.credit') }}</div>
            </div>
        </div>
        <div v-if="type == 'email'" class="flex items-center justify-around pt-1 border-t border-solid border-borderColor">
            <div style="width: 54%;user-select: none;" @click="goUrl('/email/write')" class="cursor-pointer">
                <div class="flex items-center justify-center my-1">
                    <img src="../../assets/image/home/edit.png" alt="" style="height: 20px;width: auto;">
                </div>
                <div class="text-xs text-center text-gray-500">{{ $t('email.write') }}</div>
            </div>
            <div style="height: 1.25rem;width: .0625rem;" class="bg-borderColor"></div>
            <div style="width: 54%;user-select: none;" @click="goUrl('/email')" class="cursor-pointer">
                <div class="flex items-center justify-center my-1">
                    <img src="../../assets/image/email/recive.png" alt="" style="height: 20px;width: auto;">
                </div>
                <div class="text-xs text-center text-gray-500">{{ $t('email.email') }}</div>
            </div>
        </div>
    </div>
</template>